<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
    </style>

</head>
<script src="/js/jquery-3.5.1.js"></script>
<body>
<div>
    <h1>
        书籍遗失和报损
    </h1>
</div>
<div>
    <table>
        <tr>
            <td width="2%">&nbsp;</td>
            <td width="96%">
                <table width="100%">
                    <tr>
                        <td colspan="2">
                            <div id="idMsg" ></div>
                            <form action="" method="">
                                <table class="table" id="tbRecord" >
                                    <thead>
                                    <tr>
                                        <th>用户名</th>
                                        <th>书籍编号</th>
                                        <th>书籍名称</th>
                                        <th>备注</th>
                                        <th>破损程度</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody >
                                    <tr>
                                        <td><input id="button1" type="text" readonly></td>
                                        <td><input id="button2" type="text" readonly></td>
                                        <td><input id="button3" type="text" readonly></td>
                                        <td><input id="button4" type="text"></td>
                                        <td><select id="select" >
                                            <option>遗失</option>
                                            <option>轻微破损</option>
                                            <option>明显破损</option>
                                            <option>完全破损</option>
                                        </select></td>
                                        <td><input id="button5" type="button" value="提交" onclick="tj()">
                                            <input type="button" value="查看" onclick="ck()"></td>
                                    </tr>



                                    </tbody>
                                </table>

                                <table id="tableId" style="display: none;color: #4E5465" class="table">
                                    <thead>
                                    <tr>
                                        <th>借阅者名称</th>
                                        <th>书籍编号</th>
                                        <th>书籍名称</th>
                                        <th>借阅时间</th>
                                        <th>待还时间</th>
                                        <th>金额(元)</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="borrowInfo">



                                    </tbody>


                                </table>

                            </form>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="2%">&nbsp;</td>
        </tr>
    </table>

</div>

</body>
</html>

<script>

    var idMsg = document.getElementById("idMsg");//提示盒子
    var button1 = document.getElementById("button1");//用户名
    var button2 = document.getElementById("button2");//书籍id
    var button3 = document.getElementById("button3");//书籍名称
    var button4 = document.getElementById("button4");//备注
    var button5 = document.getElementById("button5");//提交
    var select = document.getElementById("select");//破损程度


    var borObj;
    var request = new XMLHttpRequest();
    var url = "/userInfo.bor";
    request.open("Get",url);
    request.onreadystatechange = function (){
        if (request.readyState===4){
            borObj = JSON.parse(request.responseText);
            console.log(borObj[0].userId) ;
            console.log(borObj[0].userName) ;
        }
    }
    request.send(null);




    var request1 = new XMLHttpRequest();
    var url = "/borrowInfo.bor";
    request1.open("Get",url);
    request1.onreadystatechange = function (){
        if (request1.readyState==4){
            console.log(request1.responseText)
           let borObj1 = JSON.parse(request1.responseText);
            for (let j = 0; j < borObj1.length; j++) {
                if (borObj1[j].state=="未归还"){
                    let str = "<td>" + borObj1[j].userName + "</td>";
                    str += "<td>" + borObj1[j].bookid + "</td>";
                    str += "<td>" + borObj1[j].bookName + "</td>";
                    str += "<td>" + borObj1[j].borDate + "</td>";
                    str += "<td>" + borObj1[j].repayDate + "</td>";
                    str += "<td>" + borObj1[j].price + "</td>";
                    str += "<td style='align-content: center'>"+ borObj1[j].state + "</td>"
                    str += "<td><input  type='button' value='报损' onclick='ps(this)' ></td>"
                    let tr = $("<tr>" + str + "</tr>");
                    $("#borrowInfo").append(tr);


                }
            }
        }
    }
    request1.send(null);

    function ps(ele){
        let trObj = ele.parentElement.parentElement
        let userName = trObj.children[0].innerHTML;
        let bookid = trObj.children[1].innerHTML;
        let bookName = trObj.children[2].innerHTML;

        button1.value=userName
        button2.value=bookid
        button3.value=bookName

    }



    function tj(){
        if (!button1.value||!button2.value||!button3.value||!button4.value){
            idMsg.innerText="提交失败";
            idMsg.style.color="red"
        }else {
            let options=$("#select option:selected");

            let request = new XMLHttpRequest();

            console.log(borObj[0].userId)
            let url = "/BookDamageInfo.bor?bookid="+button2.value+"&msg="+button4.value+"&degree="+options.text()+"&userid="+borObj[0].userId;
            request.open("Get",url);
            request.onreadystatechange = function (){
                if (request.readyState===4){
                    console.log(request.responseText)
                    if (request.responseText==="提交成功"){
                        idMsg.style.color="green"
                    }else {
                        idMsg.style.color="red"

                    }
                    idMsg.innerText=request.responseText;

                }
            }
            request.send(null);
        }

    }
    function ck(){
        let tableId = document.getElementById("tableId");
        tableId.style.display="table";
        // window.location.reload();
    }

</script>